<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0  maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改信息</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/icon_font/iconfont.css">
</head>
<style>
    body {
        background-color: #eff3f6
    }

    header {
        background-color: #fff;
        border-bottom: 1px solid #eff3f6;
        padding: 10px;
    }

    header .white {
        font-size: 26px;
    }

    header h3 {
        margin: 0;
        position: absolute;
        top: 3%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 22px;
    }

    .group {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-bottom: 1px solid #eff3f6;
        padding: 10px;

    }

    .group img {
        width: 50px;
        height: 50px;
    }

    .gray {
        color: gray;
    }

    .block {
        color: #000;
    }

    .group input {
        border: none;
        text-align: right;
        outline: none;
    }

    #modal-overlay {
        position: absolute; /* 使用绝对定位或固定定位  */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        background-color: #333;
        opacity: 0.5; /* 背景半透明 */
    }

    /* 模态框样式 */
    .modal-data {
        position: absolute;
        top: 24%;
        left: 50%;
        transform: translate(-50%);
        width: 80%;
        height: 300px;
        margin: auto;
        background-color: #fff;
        border-radius: 20px;
        padding: 15px;
        text-align: center;
        z-index: 99999;
    }
    .btns {
        margin-top: 40px;
    }
    .btntrue {
        disabled:true
    }
    .btnfalse {
        disabled:false
    }
</style>

<body>
<div class="house_container">
    <header>
        <i class="iconfont white  icon-zuojiantou
            "></i>
        <h3>修改信息</h3>
    </header>
    <div class="group">
        <text class="block" id="name">{$ua.ua_name}</text>
        <text class="gray" id="editname">修改昵称</text>
    </div>
    <div class="group">
        <text class="block" id="phone">{$ua.ua_phone}</text>
        <text class="gray" id="editphone">修改绑定号</text>
    </div>
    <div class="group">
        <text class="block" id="code">密码</text>
        <text class="gray" id="editcode">修改密码</text>
    </div>
</div>
<div id="modal-overlay" style="display:none;"></div>
<div class="modal-data" style="display:none">
    <div class="form-group" style="display: flex; justify-content: space-between; margin-top: 20px">
        <label for="exampleInputName2" style="margin-top: 10px">手机号</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="新手机号" style="width:80%">
    </div>
    <div class="form-group" style="display: flex; justify-content: space-between">
        <label for="exampleInputEmail2" style="margin-top: 10px">验证码</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="验证码"
               style="width:30%;margin-right: 16px;">
        <button type="button" class="btn btn-success">获取验证码</button>

    </div>
    <div class="btns">
        <button type="button" class="btn btn-danger" style="margin-right: 20px;">取消</button>
        <button type="button" class="btn btn-primary">确定</button>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>
    $(function () {
        $('.white').click(function(){
            window.location.href = '__PUBLIC__/wx/user/center'
        })
        $("#editname").click(function () {
            layer.prompt({title: '请输入新的昵称'}, function (val, index) {
                var name = val
                $('#name').text(val)
                $.ajax({
                    url: '__PUBLIC__/wx/user/editinfo',
                    type:'post',
                    data:{name},
                    success:(res=>{
                        console.log(res)
                        let arr = JSON.parse(res)
                        layer.msg(arr.msg,{time:2000});
                        window.location.reload();

                    })
                })
                layer.close(index);
            });
        })
        $('.btn-primary').click(function () {
            let phone =  $('#exampleInputName2').val()
            let code =  $('#exampleInputEmail2').val()
            let name =  $('#name').text()
            $.ajax({
                url:'__PUBLIC__/wx/user/editinfo',
                type:'post',
                data:{
                    phone,
                    code,
                    name
                },
                success:(res=>{
                    let arr = JSON.parse(res)
                    layer.msg(arr.msg,{time:2000});
                    window.location.reload();
                })
            })



        })
        $('.btn-danger').click(function () {
            $('#modal-overlay').css('display', 'none')
            $('.modal-data').css('display', 'none')
        })
        //发送验证码
        $('.btn-success').click(function () {

            layer.msg('已发送短信')
            let phone = $('#exampleInputName2').val()
            let code_type = '3'
            $.ajax({
                url: 'https://taoyuanapartment.com/v1/postsendcode',
                type: 'post',
                data: {phone, code_type},
                success: (res) => {
                    if(res.code != 0) {
                        layer.msg(res.msg)
                    }else {
                        var obj = $('.btn-success')
                        var num = 60;
                        function settime(val) {
                            if (num == 0) {
                                val.removeAttr("disabled")
                                val.text("获取验证码")
                                num = 60;
                                val.css("background-color","#28a745")
                                val.css("border-color","#28a745")
                                console.log(2222)
                            } else {
                                val.attr("disabled","true")
                                val.css("background-color","#ccc")
                                val.css("border","none")

                                val.text("重新发送(" + num + ")")
                                num--;
                                setTimeout(function () {
                                    settime(val)
                                }, 1000)
                            }
                        }
                        settime(obj)
                    }
                }
            })
        })

        $("#editphone").click(function () {
            $('#modal-overlay').css('display', 'block')
            $('.modal-data').css('display', 'block')
        })
        $("#editcode").click(function () {
            layer.prompt({title: '请输入新的密码'}, function (val, index) {
                var pwd = val
                $.ajax({
                    url: '__PUBLIC__/wx/user/editinfo',
                    type:'post',
                    data:{pwd},
                    success:(res=>{
                        console.log(res)
                        let arr = JSON.parse(res)
                        layer.msg(arr.msg,{time:2000});
                        window.location.reload();
                    })
                })
                layer.close(index);
            });
        })


    })
</script>

</html>